<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>{{.UserName}}的主页</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/bg_img.png" style="width:62px;height:62px;"/>
    <link rel="stylesheet" href="/vendors/bootstrap/css/bootstrap.min.css">
    <link href="/vendors/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="/vendors/markdown/editor/css/editormd.min.css" rel="stylesheet">
    <link href="/vendors/markdown/editor/css/editormd.preview.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/main.css">
    <script type="text/javascript" src="/vendors/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/vendors/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/util.js"></script>
    <script type="text/javascript" src="/js/main.js"></script>
    <style media="screen">
      .x-title {
        background-color: rgba(148, 44, 73, 0.5)!important;
        font-size: medium;
        /*font-weight: bold;*/
        color: white !important;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .user_profile {
        margin-top: 10px;
      }

      .user_profile a {
        color: inherit;
        text-decoration: none;
      }

      .user_profile img {
        width: 51px;
        height: 51px;
        display: inline-block;
        border-radius: 50%;
        border: 1px solid rgba(148, 44, 73, 0.5);
        outline: 0;
      }

      .user_profile span {
        font-size: medium;
        font-weight: bold;
        margin-left: 5px;
      }

      .user_profile_data {
        height: 40px;
        margin-bottom: 5px;
      }

      .user_profile_data {
        margin-top: 15px;
      }

      .user_profile_data dl {
        display: inline-block;
        text-align: center;
        border-top: 5px;
      }

      a {
        color: inherit;
        text-decoration: none!important;
      }
      div.article_operation  a:hover {
        color: black!important;
        cursor: default!important;
      }
    </style>
  </head>

  <body style="background-color:#f4f5f5">
    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="title">
              <a href="/"><i class="fa fa-home fa-fw"></i>EdgeX Foundry中国社区</a>
            </div>
          </div>

          <div class="col-sm-6 col-md-6 col-lg-6" style="text-align:right">
            <div class="header_post">
              <a><span><i class="fa fa-edit fa-fw"></i>发帖</span></a>
            </div>
            <div class="header_user" style="display:none;">
              <img src="" alt="" style="width:22px;height:22px;margin:0;margin-left:5px;padding:0;border-radius:15%;border:1px solid rgba(148, 44, 73, 0.5);">
                <span class="badge" style="display:none;position:relative;left:-10px;top:-10px;background-color:red!important;">99+</span>
              <!-- <a><span><i class="fa fa-user-circle-o fa-fw "></i>个人首页</span></a> -->
            </div>
            <div class="header_login">
              <a><span><i class="fa fa-sign-up fa-fw"></i>登录</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container" style="margin-top:75px;">
      <div class="row">
        <div class="col-sm-3 col-md-3 col-lg-3">
          <div class="panel panel-default">
            <div class="panel-heading x-title">作者信息</div>
            <div class=" panel-body">
              <div class="user_profile">
                <a href="/users/{{.UserName}}"><img src="{{.AvatarUrl}}" alt=""></a>
                <a href="/users/{{.UserName}}">
                  <span>{{.UserName}}</span>
                </a>
              </div>
              <div style="border-top:1px solid gray;margin-top:10px;"></div>
              <div class="user_profile_data">
                <dl style="margin-left:10px;">
                  <dt>文章</dt>
                  <dd>{{.ArticleCount}}</dd>
                </dl>
                <dl style="margin-left:10px;">
                  <dt>评论</dt>
                  <dd>0</dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading x-title">热门文章</div>
            <div class="panel-body">

            </div>
          </div>
        </div>
        <div class="col-sm-9 col-md-9 col-lg-9">
         <div id="message" class="panel panel-default" style="margin-bottom:5px;">
          <div class="panel-heading x-title">消息</div>
           <div class="panel-body"  style="padding:0;">

           </div>
         </div>
         <!-- <div class="alert alert-danger" role="alert" style="margin-top:0;text-align:center;height:50px;">
           <span style="margin-right:60px;">点击加载更多</span>
         </div> -->

          <div class="panel panel-default" style="margin-bottom:0;">
            <div class="panel-heading x-title">作者文章</div>

            <div class="panel-body x-article-body" style="padding:0;"></div>
          </div>
          <!-- <div class="alert alert-danger" role="alert" style="margin-top:0;text-align:center;">
            <span style="margin-right:60px;">点击加载更多</span>
          </div> -->
        </div>
      </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">提示</h4>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" onclick="deleteArticle()" class="btn btn-primary">确定</button>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">

      var userId = {{.UserId}}
      var userName = {{.UserName}}
      function updateMessage(event){
        var msgId = $(event.currentTarget).attr("msgId");
        $.ajax({
          url:"/api/v1/message/" + msgId,
          type:"PUT",
          success:function(){
            $.ajax({
              url:"/api/v1/message/count",
              type:"GET",
              success:function(data){
                if(data == 0){
                  $("div.header_user span.badge").hide();
                  return;
                }else if(data > 100){
                  $("div.header_user span.badge").text(data+"+");
                }else{
                  $("div.header_user span.badge").text(data);
                }
                $("div.header_user span.badge").show();
              }
            });
          }
        });
      }

      $(document).ready(function () {
        if (!edgexClubMainModule.loginIsVaild) {
          $("#message").hide();
        }
        if (edgexClubMainModule.loginIsVaild) {
          var userInfo = JSON.parse(window.localStorage.getItem("edgex-club-userInfo"));
          if(userInfo.id != userId){
              $("#message").hide();
          }
          $.ajax({
            url:"/api/v1/message",
            type:"GET",
            success:function(data){
              if(data.length == 0){
                  $("#message").hide();
              }
              for(var i=0;i<data.length;i++){
                var d = data[i];
                var isRead = "";
                if(d.isRead){
                  isRead="已读";
                }else{
                  isRead="未读";
                }
                var a = '<a msgId="'+d.id+'" target="_blank" onclick="updateMessage(event)" href="/articles/users/'+d.articleUserName+'/'+d.articleId+'" class="list-group-item" ><span style="clear:both;display:inline-block;width:50%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">'+d.content+'</span> <span class="badge">'+edgexFmtDate(d.created)+'</span><span class="badge">'+isRead+'</span></a>'
                $("#message div.panel-body").append(a)
              }

            }
          });

        }

        //var articles = testData;

        $.ajax({
          url:"/articles/users/"+userId,
          type:"GET",
          success:function(data){
            var articles = data;
            var userInfo = JSON.parse(window.localStorage.getItem("edgex-club-userInfo"));
            for (var i = 0; i < articles.length; i++) {
              var path = "/articles/users/" + articles[i].userName + "/" + articles[i].id;
              var row = '<div class="article_body">';
              row += '<div class="user_profile" style="margin-left:10px;padding-top:5px;">';
              row += '<img src="{{.AvatarUrl}}" alt=""></div>';

              row += '<div class="article_title">';
              row += '<a href=\'' + path + '\' target="_blank">' + articles[i].title + '</a>';
              if(edgexClubMainModule.loginIsVaild){
                if(userInfo.id == userId){
                  if (articles[i].approved) {
                    row += '<span class="label label-success" style="float:right;margin-right:5px;">已审核</span>';
                  } else {
                    row += '<span class="label label-warning" style="float:right;margin-right:5px;">审核中</span>';
                  }
                }
              }
              row += '</div>';
              row += '<div class="article_intro" articlesId="'+articles[i].id+'">';
              row += '<span style="background-color:rgba(148, 44, 73, 0.5);border-radius:3px;color:white;padding:3px;">' + articles[i].type + '</span>&nbsp;&nbsp;<span class="badge">' + edgexFmtDate(articles[i].created) + '</span>';
              row += '<div class="article_operation" style="display:none;margin-right:5px;float:right;color:rgba(148, 44, 73, 0.5);padding:3px;"><a><span class="edit">编辑</span></a>&nbsp;&nbsp;<a><span class="delete">删除</span></a><div>';
              row += '</div></div>';
              $("div.x-article-body").append(row);
            }
            if(edgexClubMainModule.loginIsVaild){
              if(userInfo.id == userId){
                $("div.article_operation").show();
              }
            }
            $("div.article_operation span.edit").on('click',function(){
              var articlesId =  $(this).parents("div.article_intro").attr("articlesId");
              window.location.href = "/article/edit/" +userName+ "/"+ articlesId;
            });
            $("div.article_operation span.delete").on('click',function(){
              $('#myModal div.modal-body').empty();
              $('#myModal div.modal-body').append("  确定要删除吗？");
              $('#myModal').modal('show');
            });
          }
        });


      });
      function deleteArticle(){
        $('#myModal').modal('hide');
        // var articlesId =  $("div.article_intro").attr("articlesId");
        // $.ajax({
        //   url:"/api/v1/article/"+articlesId,
        //   type:"GET",
        //   success:function(data){
        //     $('#myModal div.modal-body').empty();
        //     $('#myModal div.modal-body').append("  删除成功！");
        //     $('#myModal').modal('show');
        //   }
        // });
      }

      testData = [
        {
          id: "5aa89209e4b01d97205d7f4c",
          title: "这个是文章的title",
          path: "/articles/article.html",
          created: 1520996873655
        }, {
          id: "5aa89209e4b01d97205d7f4c",
          title: "这个是文章的title",
          path: "/articles/article.html",
          created: 1520996873655
        }, {
          id: "5aa89209e4b01d97205d7f4c",
          title: "这个是文章的title",
          path: "/articles/article.html",
          created: 1520996873655
        }, {
          id: "5aa89209e4b01d97205d7f4c",
          title: "这个是文章的title",
          path: "/articles/test.html",
          created: 1520996873655
        }, {
          id: "5aa89209e4b01d97205d7f4c",
          title: "这个是文章的title",
          path: "/articles/test.html",
          created: 1520996873655
        }, {
          id: "5aa89209e4b01d97205d7f4c",
          title: "这个是文章的title",
          path: "/articles/test.html",
          created: 1520996873655
        }
      ]
    </script>
  </body>

</html>
